<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="public/introduceCss :: CSS(~{::title})">
    <title>卖货时间到</title>
</head>

<body>
<!-- 导航栏 -->
<nav th:insert="~{public/guide :: head}"></nav>
<div style="margin-top: 4%;"></div>

<main id="main">
    <section id="contact" class="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-4" data-aos="fade-right">
                    <div class="section-title">
                        <h2>我要卖货</h2>
                        <p>为了保证物品质量以及交易安全性,请您一定要仔细填写以下每一个空,如有假货欺骗等行为,将追求法律责任</p>
                        <p>上传商品后,工作人员会在24小时之类上架显示,如果上传商品有误,直接从新上传即可,后台会手动帮你替换.</p>
                    </div>
                </div>

                <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
                    <div class="info mt-4">
                        <i class="bi bi-geo-alt"></i>
                        <h4>Location:</h4>
                        <p>安徽省合肥市锦绣大道99号合肥学院南艳湖校区第三校园</p>
                    </div>

                    <form th:action="@{/addGoods}" method="post" id="form" enctype="multipart/form-data"
                          class="php-email-form mt-4">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <input type="text" class="form-control" id="goodsname" name="goodsname"
                                       placeholder="输入卖的东西"
                                       required>
                            </div>
                            <div class="col-md-4 form-group">
                                <input type="text" class="form-control" id="name" name="name" placeholder="输入您的姓名"
                                       required>
                            </div>
                            <div class="col-md-4 form-group mt-3 mt-md-0">
                                <input type="text" class="form-control" id="stuId" name="stuId" placeholder="输入您的学号"
                                       required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="输入的您的手机号"
                                       required>
                            </div>
                            <div class="col-md-4 form-group mt-3 mt-md-0">
                                <input type="text" class="form-control" id="qq" name="qq" placeholder="输入您的QQ号"
                                       required>
                            </div>
                            <div class="col-md-4 form-group mt-3 mt-md-0">
                                <input type="text" class="form-control" id="wechat" name="wechat" placeholder="输入您的微信号"
                                       required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 form-group mt-3 mt-md-0">
                                <input type="text" class="form-control" id="class" name="class" placeholder="输入您的班级"
                                       required>
                            </div>
                            <div class="col-md-8 form-group mt-3 mt-md-0">
                                <input type="text" class="form-control" id="address" name="address"
                                       placeholder="输入您的住址信息(例:46栋113室)"
                                       required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"
                                       class="form-control" id="goodsprice" name="goodsprice"
                                       placeholder="输入商品的价位,慎重考虑价位,最高不能高于99999元"
                                       required>
                            </div>
                        </div>
                        <div class="sellRadio">
                            <span>
                                <input type="radio" id="exampleRadios1" name="exampleRadios" value="1">
                                <label class="form-check-label" for="exampleRadios1">
                                    电子产品
                                </label>
                            </span>
                            <span>
                                <input type="radio" id="exampleRadios2" name="exampleRadios" value="2">
                                <label class="form-check-label" for="exampleRadios2">
                                    运动产品
                                </label>
                            </span>
                            <span>
                                <input type="radio" id="exampleRadios3" name="exampleRadios" value="3">
                                <label class="form-check-label" for="exampleRadios3">
                                    书本产品
                                </label>
                            </span>
                            <span>
                                <input type="radio" id="exampleRadios4" name="exampleRadios" value="4">
                                <label class="form-check-label" for="exampleRadios4">
                                    玩偶产品
                                </label>
                            </span>
                            <span>
                                <input type="radio" id="exampleRadios5" name="exampleRadios" value="5">
                                <label class="form-check-label" for="exampleRadios5">
                                    衣鞋产品
                                </label>
                            </span>
                            <span>
                                <input type="radio" id="exampleRadios6" name="exampleRadios" value="6">
                                <label class="form-check-label" for="exampleRadios6">
                                    化妆护肤产品
                                </label>
                            </span>
                            <span>
                                <input type="radio" id="exampleRadios7" name="exampleRadios" value="7">
                                <label class="form-check-label" for="exampleRadios7">
                                    美食产品
                                </label>
                            </span>
                            <span>
                                <input type="radio" id="exampleRadios8" name="exampleRadios" value="8">
                                <label class="form-check-label" for="exampleRadios8">
                                    其他产品
                                </label>
                            </span>
                        </div>
                        <p>请上传1MB以内的图片</p>
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <input type="file" id="chooseImage1" name="file1">
                                <button type="button" class="Godzload" id="uploadfile">上传第一张图片</button>
                                <!-- 保存用户自定义的背景图片 -->
                                <img id="cropedBigImg" class="imgfile" value='custom' alt="" data-address=''
                                     title="自定义背景"/>
                            </div>
                            <div class="col-md-4 form-group">
                                <input type="file" id="chooseImage2" name="file2">
                                <button type="button" class="Godzload" id="uploadfile2">上传第二张图片</button>
                                <!-- 保存用户自定义的背景图片 -->
                                <img id="cropedBigImg2" class="imgfile" value='custom' alt="" data-address=''
                                     title="自定义背景"/>
                            </div>
                            <div class="col-md-4 form-group">
                                <input type="file" id="chooseImage3" name="file3">
                                <button type="button" class="Godzload" id="uploadfile3">上传第三张图片</button>
                                <!-- 保存用户自定义的背景图片 -->
                                <img id="cropedBigImg3" class="imgfile" value='custom' alt="" data-address=''
                                     title="自定义背景"/>
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <textarea class="form-control" id="message" name="message"
                                      rows="5" placeholder="提供商品信息"
                                      required></textarea>
                        </div>
                        <div id="success">
                            <div th:text="${disp}" class="text-success"></div>
                        </div>

                        <div class="text-center">
                            <button type="button" class="Godzload" onclick="SBCNM()">上传商品</button>
                        </div>
                    </form>
                    <script>
                        function SBCNM() {
                            //调用方式
                            $().getFuc();
                        };
                        $(function () {
                            $.fn.getFuc = function () {
                                var name = $('#name').val();
                                var stuId = $('#stuId').val();
                                var class1 = $('#class').val();
                                var phone = $('#phone').val();
                                var wechat = $('#wechat').val();
                                var exampleRadios = $('input[name="exampleRadios"]:checked').val();

                                var uploadfile1 = getFileName($('#chooseImage1').val());
                                var uploadfile2 = getFileName($('#chooseImage2').val());
                                var uploadfile3 = getFileName($('#chooseImage3').val());

                                var address = $('#address').val();
                                var message = $('#message').val();
                                var goodsprice = $('#goodsprice').val();

                                function getFileName(o) {
                                    var pos = o.lastIndexOf("\\");
                                    return o.substring(pos + 1);
                                }

                                if (name == "" || stuId == "" || class1 == "" || phone == "" || wechat == "" || exampleRadios == "" || address == "") {
                                    alert("请填写完整,不能漏");
                                    return
                                }
                                // console.log("姓名: "+name);
                                // console.log("学号: "+stuId);
                                // console.log("班级: "+class1);
                                // console.log("学号: "+phone);
                                // console.log("微信: "+wechat);
                                // console.log("选择了: "+exampleRadios);
                                // console.log("图片1名称: "+uploadfile1);
                                // console.log("图片2名称: "+uploadfile2);
                                // console.log("图片3名称: "+uploadfile3);
                                // console.log("学生住址: "+address);
                                // console.log("商品信息: "+message);
                                if (goodsprice.length > 5) {
                                    alert("价位过高");
                                } else {
                                    if (confirm("您卖" + goodsprice + "元的价格,确定吗?")) {
                                        $("#form").submit();
                                    }
                                }
                            }
                        })
                    </script>
                </div>
            </div>
        </div>
    </section>
    <script>
        $(function () {
            $('#uploadfile').on('click', function () {
                $('#chooseImage1').click();
            });
            $('#chooseImage1').on('change', function () {
                var filePath = $(this).val();         //获取到input的value，里面是文件的路径
                var fileSize = this.files[0].size;
                if (fileSize > 1024 * 1024) {
                    alert("文件不能大于1MB");
                    return;
                }
                var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                // 检查是否是图片
                if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
                    alert('上传错误,文件格式必须为：png/jpg/jpeg');
                    return;
                }
                var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
                $('#cropedBigImg').attr('src', src);
            });

            $('#uploadfile2').on('click', function () {
                $('#chooseImage2').click();
            });
            $('#chooseImage2').on('change', function () {
                var filePath = $(this).val();         //获取到input的value，里面是文件的路径
                var fileSize = this.files[0].size;
                if (fileSize > 1024 * 1024) {
                    alert("文件不能大于1MB");
                    return;
                }
                var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                // 检查是否是图片
                if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
                    alert('上传错误,文件格式必须为：png/jpg/jpeg');
                    return;
                }
                var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
                $('#cropedBigImg2').attr('src', src);
            });

            $('#uploadfile3').on('click', function () {
                $('#chooseImage3').click();
            });
            $('#chooseImage3').on('change', function () {
                var filePath = $(this).val();         //获取到input的value，里面是文件的路径
                var fileSize = this.files[0].size;
                if (fileSize > 1024 * 1024) {
                    alert("文件不能大于1MB");
                    return;
                }
                var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                // 检查是否是图片
                if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
                    error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
                    return;
                }
                var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
                $('#cropedBigImg3').attr('src', src);
            });
        });
    </script>

</main>

<!-- 赞助商 -->
<nav th:insert="~{public/rump :: sponsor}"></nav>
<!-- 页尾 -->
<nav th:insert="~{public/rump :: foot}"></nav>
<!-- 一键回顶 -->
<nav th:insert="~{public/rump :: backTop}"></nav>
<!-- 公共的JS文件 -->
<nav th:insert="~{public/publicJs :: JS}"></nav>

</body>

</html>